<script setup lang="ts">
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  TitleComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted, watch } from 'vue'
import { ref } from 'vue'
import { usePlanStore } from '@/stores/plan'
import { formatDate } from '@/utils'
import { getCaloriesRecordUtil } from '@/AGC/utils/record'

const store = usePlanStore()
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
])
const emits = defineEmits(['goCollect'])

const chart = ref()
let myChart: echarts.ECharts | null = null
const initEcharts = () => {
  myChart = echarts.init(chart.value)
  const option = {
    title: {
      text: `${formatDate(store.date)} 热量摄入与消耗`,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      selectedMode: false,
    },
    grid: {
      left: '3%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        name: '情况',
        data: ['推荐摄入', '实际摄入', '推荐消耗', '实际消耗'],
        axisLine: {
          symbol: ['none', 'arrow'],
          symbolOffset: [0, 10],
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '千卡',
        axisLine: {
          show: true,
          symbol: ['none', 'arrow'],
          symbolOffset: [0, 10],
        },
      },
    ],
    series: [
      {
        name: '热量',
        type: 'bar',
        barWidth: '60%',
        data: yAxisData.value,
        label: {
          show: true,
          position: 'top',
        },
      },
    ],
  }
  myChart.setOption(option)
}
const updateEcharts = () => {
  const option = {
    title: {
      text: `${formatDate(store.date)} 热量摄入与消耗`,
    },
    series: [
      {
        name: '热量',
        data: yAxisData.value,
      },
    ],
  }

  if (myChart) {
    myChart.setOption(option)
  }
}
const yAxisData = ref<number[]>([])
const getYAxisData = async () => {
  // 1. 获取卡路里记录
  const caloriesRecord = await getCaloriesRecordUtil(store.date)
  // 2. 设置 yAxisData
  yAxisData.value = [
    store.recIngestion,
    caloriesRecord.ingestion,
    store.recConsume,
    caloriesRecord.consume,
  ]
}
watch(
  () => store.date,
  async () => {
    await getYAxisData()
    updateEcharts()
  },
)
onMounted(async () => {
  setTimeout(async () => {
    initEcharts()
    await getYAxisData()
    updateEcharts()
  }, 100)
})
</script>

<template>
  <el-card style="width: 48%; position: relative">
    <!-- 渐变改善版 -->
    <div class="gradient-text" v-if="yAxisData[1] == 0 && yAxisData[3] == 0">
      <span>📢</span>
      <span class="keyword">小康途</span>
      没有收集到您
      <span class="keyword">{{ formatDate(store.date) }}</span>
      的热量数据哦~
      <span class="link" @click="emits('goCollect')">去收集</span>
    </div>
    <div class="gradient-text" v-else>
      <span>📢</span>
      <span class="keyword">小康途</span>
      已经收集到您
      <span class="keyword">{{ formatDate(store.date) }}</span>
      的热量数据了~
      <span class="link" @click="emits('goCollect')">去修改</span>
    </div>
    <div ref="chart" style="width: 100%; height: 400px"></div>
  </el-card>
</template>

<style scoped lang="less">
// 渐变改善版
.gradient-text {
  position: absolute;
  left: 65%;
  top: 12px;
  transform: translateX(-5%);
  z-index: 99;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-width: 250px;
  color: white;
  font-size: 14px;
  text-align: center;
  font-family: 'Comic Sans MS', cursive, sans-serif;

  .keyword {
    color: #ffeb3b; /* 高亮颜色 */
    font-weight: bold; /* 加粗 */
  }

  .link {
    text-decoration: underline; /* 下划线 */
    cursor: pointer; /* 鼠标指针 */
  }

  .link:hover {
    color: #ffeb3b; /* 鼠标悬停时的颜色 */
  }
}
</style>
